<template>
    <div class="zlst-layout-layoutComp-layoutIndex">
        <Menu mode="horizontal"  active-name="1" @on-select="changeMenu">
            <MenuItem name="basic-userComp-layoutComp-layoutF1">
                <Icon type="ios-paper"></Icon>
                F1布局
            </MenuItem>
            <MenuItem name="basic-userComp-layoutComp-layoutF2">
                <Icon type="ios-paper"></Icon>
                F2布局
            </MenuItem>
            <Submenu name="3">
                <template slot="title">
                    <Icon type="stats-bars"></Icon>
                    其他
                </template>
                <MenuGroup title="使用">
                    <MenuItem name="basic-basic-vueStudy-sassDemo">sass语法</MenuItem>
                    <!--<MenuItem name="3-2">活跃分析</MenuItem>-->
                    <!--<MenuItem name="3-3">时段分析</MenuItem>-->
                </MenuGroup>
                <!--<MenuGroup title="留存">-->
                <!--<MenuItem name="3-4">用户留存</MenuItem>-->
                <!--<MenuItem name="3-5">流失用户</MenuItem>-->
                <!--</MenuGroup>-->
            </Submenu>
        </Menu>

        <!-- demo的容器 -->
        <router-view ></router-view>
    </div>
</template>

<script>

    import hljs from 'highlight.js'

    export default {
        mounted: function () {
            window.setTimeout(function () {
                $('.zlst-layout-layoutComp-layoutIndex pre code').each(function(i, block) {
                    hljs.highlightBlock(block);
                });
            }, 500);
        },
        data: function () {
            return {
                url: 'https://www.baidu.com',
                urlname: 'https://www.163.com',
                htmlCode:`
                    <a v-bind:href="url">百度</a>
                    <a :href="urlname">百度</a>
                `,
            }
        },
        methods: {
            changeMenu: function (menuName){
                // 命名的路由
                this.$router.push({ name: menuName})
            }
        },
    }
</script>

<style scoped lang="scss">
    .zlst-layout-f1{
        height:100%;
        width:100%;
        .theadA{
            height:46px;
            border-bottom:1px solid #ededed;
        }
        .tbodyA{
            height: calc(100% - 46px);
            overflow:auto;
        }
    }


</style>
